/**
 * 课程单选弹窗
 */
<template>
<vp-dialog ref="courseDialog" :span="2">
    <template #title>
        <vp-label zh="选择课程" en="Choose Course"/>
    </template>
    <vp-card class="mb5">
        <el-form ref="searchFormRef" :model="searchForm" @submit.prevent
            @keyup.enter="handleSearch" label-width="120px">
            <vp-search-row :show-more="showMore">
                <vp-search-col :span="3">
                    <el-form-item prop="bh">
                        <template #label><vp-label zh="课程编号" en="Course No."/></template>
                        <el-input v-model="searchForm.bh" v-trim></el-input>
                    </el-form-item>
                </vp-search-col>
                <vp-search-col :span="3">
                    <el-form-item prop="mc">
                        <template #label><vp-label zh="课程名称" en="Course Name"/></template>
                        <el-input v-model="searchForm.mc" v-trim></el-input>
                    </el-form-item>
                </vp-search-col>
                <vp-search-col btn-col>
                    <vp-btn-search :loading="loading" @click="handleSearch"/>
                    <vp-btn-reset @click="handleSearchReset"/>
                </vp-search-col>
            </vp-search-row>
        </el-form>
    </vp-card>
    <vp-card v-loading="loading">
        <vp-table 
            ref="tableRef"
            :data="tableData"  
            highlight-current-row
            @current-change="handleCurrentChange" 
            @sort-change="handleSortChange"
            :height="`calc(100vh - 450px - ${showMore?'47px':'0px'}`"
            row-key="id">
            <el-table-column align="center" label="#" type="index">
            </el-table-column>
            <el-table-column sortable="custom" prop="bh" min-width="120" show-overflow-tooltip>
                <template #header><vp-label zh="课程编号" en="Course No."/></template>
            </el-table-column>
            <el-table-column sortable="custom" prop="mc" min-width="200" show-overflow-tooltip>
                <template #header><vp-label zh="课程名称" en="Course Name"/></template>
                <template #default="scope">
                    <span>{{ (scope.row.mcZw || '') + ' ' + (scope.row.mcYw || '') }}</span>
                </template>
            </el-table-column>
        </vp-table>
    </vp-card>
    <template #footer>
        <vp-btn-empty  @click="handleEmpty"/>
        <vp-btn-confirm  @click="handleSave"/>
    </template>
</vp-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';

export default defineComponent({
    name: "vpCourseDialog",
    components: {},
    emits:["confirm"],
    setup(props, context) {
        const state = reactive({
            searchForm: {
				bh: "",
                mc: "",
                ztList:[89],
                zxbs: 2,
			},
            page: {
				total: 0, // 总条数
				pageNum: 1, // 当前页
				pageSize: 999, // 分页大小
				sortColumn: "",
				sortOrder: ""
			},
            selectedId: '',
			tableData: [],
            course: {},
            showMore: false,
            loading: false
		});
        const courseDialog = ref();
        const searchFormRef = ref();
        const tableRef = ref();

        const handleOpen = (options: any)=>{
            state.selectedId = options.selectedId;
            courseDialog.value.handleOpen();
            loadDataList();
        }

        const loadDataList = () => {
			state.loading = true;
			request.get('/training/course/pageList', {
				params: {
					...state.searchForm,
                    ...state.page,
				}
			}).then(res => {
				state.tableData = res?.data?.list || [];
				state.page.total = res?.data?.total || 0;
				state.page.pageNum = res?.data?.pageNum || 1;
                console.log(state.selectedId);
                const currentRow = state.tableData.find((obj: any)=>{return obj.id === state.selectedId});
                if (currentRow) {
                    tableRef.value.setCurrentRow(currentRow);
                }
 			}).finally(()=>{
				state.loading = false
			})
		}

        const handleCurrentChange = (val: any) => { 
            state.course = val;
        }

        const handleSave = () => {
            if(state.loading){
                return;
            }
            context.emit("confirm", state.course);
            courseDialog.value.handleClose();
        }

        const handleSearch = ()=>{
            if(state.page.pageNum == 1){
				loadDataList();
			}else{
				state.page.pageNum = 1
			}
		}

        const handleSearchReset = () => {
            searchFormRef.value.resetFields();
        }

        const handleSortChange = (column: any) => {
            state.page.sortColumn = column.prop;
            state.page.sortOrder = column.order == 'descending' ? 'desc' : 'asc'
            loadDataList();
        }

        const handleEmpty = () => {
            if(state.loading){
                return;
            }
            context.emit("confirm", {});
            courseDialog.value.handleClose();
        }

        return {
            ...toRefs(state),
            searchFormRef,
            handleSave,
            courseDialog,
            handleOpen,
            handleCurrentChange,
            handleSearch,
            handleSearchReset,
            handleSortChange,
            markTextColor,
            handleEmpty,
            tableRef,
        }
    },
})
</script>
